<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件的定义和使用</title>
</head>
<body>
<div id="app">
    <h2 v-my-directive>Hello, World!</h2>
</div>

<script type="module">
    import {createApp} from "../../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                return {}
            }
        }
    )

    // 插件的类型是一个对象
    let MyPlugin = {}

    // 每个插件如果想要使用的话，必须提供一个 install 方法，用来安装该插件
    // application 这个参数在使用的时候，默认是不需要显示提供，而是直接传入 vue 对象
    // options 这个参数在使用的过程中，可能需要提供。
    MyPlugin.install = function (application, options) {
        console.log("正在安装 MyPlugin 插件");

        application.directive(
            "my-directive",
            {
                mounted(el, bindings){
                    el.style = "width:300px; height:200px; background-color:grey"
                }
            }
        )

        application.myGlobalMethod = function () {
            console.log("调用了 插件中定义的函数 myGlobalMethod");
        }



        console.log("已经完成安装 MyPlugin 插件");
    }


    // Vue 想要使用插件的话，必须调用 use 方法
    app.use(MyPlugin)

    app.myGlobalMethod()
    app.mount("#app")
</script>
</body>
</html>